<template>
    <div class="progress-box" :style="`--value: ${ value }`">
        <div class="progress" :style="`--tc: ${ tc }; --bg: ${ bg }`"></div>
        <div class="value" :style="`--fs: ${ fs }`">{{ value }}</div>
    </div>
</template>

<script setup>
defineProps({
    value: { type: String, required: true },   // 进度值
    fs: { type: String,  default: '0.75vw' },  // 字体大小
    tc: { type: String,  default: '#222' },    // 进度条前景颜色
    bg: { type: String,  default: '#ccc' },    // 进度条背景颜色
});
</script>

<style scoped lang="less">
.progress-box {
    display: flex;
    flex-direction: column;

    .progress {
        --h: 0.5vw;
        height: var(--h);
        background-color: var(--bg);
        border-radius: var(--h);
        transition: width 0.5s ease-in-out;
        position: relative;
        overflow: hidden;

        &::after {
            content: '';
            display: block;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: calc(var(--value) - 100%);
            background-color: var(--tc);
        }
    }

    .value {
        font-size: var(--fs);
        color: #999;
    }
}
</style>